<template>
  <Layout>
    <div class="home-page">This is home page</div>
    <div class="time">Time is {{ time }}</div>
    <div class="site-name">Site Name: {{ siteName }}</div>
    <div class="slogan">Slogan: {{ siteSlogan }}</div>
    <button @click="goAbout">=> About</button>
  </Layout>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { initSiteInfo } from '@/controller/Home';
import Layout from '@/layout/index.vue';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'Home',
  components: {
    Layout,
  },
  setup() {
    const time = ref(new Date().toLocaleTimeString());
    setInterval(() => {
      time.value = new Date().toLocaleTimeString();
    }, 1000);
    const siteName = ref<string>('');
    const siteSlogan = ref<string>('');
    onMounted(async () => {
      const siteInfo = await initSiteInfo();
      if (siteInfo) {
        siteName.value = siteInfo.name;
        siteSlogan.value = siteInfo.slogan;
      } else {
        siteName.value = 'err';
        siteSlogan.value = 'err';
      }
    });
    const router = useRouter();
    const goAbout = () => {
      router.push({
        name: 'About',
      });
    };
    return {
      time,
      siteName,
      siteSlogan,
      goAbout,
    };
  },
});
</script>

<style scoped lang="scss">
</style>
